<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8 animate-fade-in">
        <div class="flex items-center space-x-4 mb-4">
          <div class="p-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl shadow-lg">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
            </svg>
          </div>
          <div>
            <h1 class="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">用户管理</h1>
            <p class="text-gray-600 mt-1">管理系统用户和权限</p>
          </div>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6 mb-8 animate-slide-up">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div class="md:col-span-2">
            <div class="relative">
              <input
                v-model="searchQuery"
                type="text"
                placeholder="搜索用户..."
                class="w-full pl-12 pr-4 py-3 bg-white/70 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 placeholder-gray-400"
                @input="handleSearch"
              />
              <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </div>
          </div>
          <div>
            <select
              v-model="selectedRole"
              class="w-full px-4 py-3 bg-white/70 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
              @change="handleFilter"
            >
              <option value="">所有角色</option>
              <option value="admin">管理员</option>
              <option value="teacher">教师</option>
              <option value="student">学生</option>
            </select>
          </div>
          <div>
            <select
              v-model="selectedStatus"
              class="w-full px-4 py-3 bg-white/70 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
              @change="handleFilter"
            >
              <option value="">所有状态</option>
              <option value="active">活跃</option>
              <option value="inactive">非活跃</option>
              <option value="banned">已封禁</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 用户列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-slide-up animation-delay-200">
        <div
          v-for="user in filteredUsers"
          :key="user.id"
          class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] p-6"
        >
          <!-- 用户头像和信息 -->
          <div class="flex items-center space-x-4 mb-4">
            <div class="relative">
              <img
                :src="user.avatar || '/static/avatar/default.jpg'"
                :alt="user.username"
                class="h-16 w-16 rounded-full border-4 border-white shadow-lg"
              />
              <div
                :class="[
                  'absolute -bottom-1 -right-1 w-5 h-5 rounded-full border-2 border-white',
                  user.status === 'active' ? 'bg-green-500' :
                  user.status === 'inactive' ? 'bg-yellow-500' :
                  'bg-red-500'
                ]"
              ></div>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900">{{ user.username }}</h3>
              <p class="text-sm text-gray-500">{{ user.email }}</p>
            </div>
          </div>

          <!-- 角色和状态标签 -->
          <div class="flex space-x-2 mb-4">
            <span
              :class="[
                'px-3 py-1 rounded-full text-xs font-semibold',
                user.role === 'admin' ? 'bg-gradient-to-r from-red-100 to-red-200 text-red-800' :
                user.role === 'teacher' ? 'bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800' :
                'bg-gradient-to-r from-gray-100 to-gray-200 text-gray-800'
              ]"
            >
              {{ user.role === 'admin' ? '管理员' : user.role === 'teacher' ? '教师' : '普通用户' }}
            </span>
            <span
              :class="[
                'px-3 py-1 rounded-full text-xs font-semibold',
                user.status === 'active' ? 'bg-gradient-to-r from-green-100 to-green-200 text-green-800' :
                user.status === 'inactive' ? 'bg-gradient-to-r from-yellow-100 to-yellow-200 text-yellow-800' :
                'bg-gradient-to-r from-red-100 to-red-200 text-red-800'
              ]"
            >
              {{ user.status === 'active' ? '活跃' : user.status === 'inactive' ? '非活跃' : '已封禁' }}
            </span>
          </div>

          <!-- 时间信息 -->
          <div class="space-y-2 mb-4">
            <div class="flex items-center text-sm text-gray-600">
              <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
              注册：{{ formatDate(user.createdAt) }}
            </div>
            <div class="flex items-center text-sm text-gray-600">
              <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              最后登录：{{ formatDate(user.lastLoginAt) }}
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="flex space-x-2">
            <button
              class="flex-1 px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-sm font-medium rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-200 hover:scale-105"
              @click="editUser(user)"
            >
              编辑
            </button>
            <button
              v-if="user.status === 'active'"
              class="flex-1 px-4 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white text-sm font-medium rounded-xl hover:from-red-600 hover:to-red-700 transition-all duration-200 hover:scale-105"
              @click="banUser(user)"
            >
              封禁
            </button>
            <button
              v-else
              class="flex-1 px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-medium rounded-xl hover:from-green-600 hover:to-green-700 transition-all duration-200 hover:scale-105"
              @click="unbanUser(user)"
            >
              解封
            </button>
            <button
              class="px-4 py-2 bg-gradient-to-r from-gray-500 to-gray-600 text-white text-sm font-medium rounded-xl hover:from-gray-600 hover:to-gray-700 transition-all duration-200 hover:scale-105"
              @click="deleteUser(user)"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredUsers.length === 0" class="text-center py-12 animate-fade-in">
        <div class="mx-auto w-24 h-24 bg-gradient-to-r from-gray-100 to-gray-200 rounded-full flex items-center justify-center mb-4">
          <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">暂无用户</h3>
        <p class="text-gray-500">没有找到符合条件的用户</p>
      </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="mt-8 animate-fade-in">
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6">
          <div class="flex items-center justify-between">
            <div class="flex-1 flex justify-between sm:hidden">
              <button
                :disabled="currentPage === 1"
                class="relative inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-sm font-medium rounded-xl hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
                @click="goToPage(currentPage - 1)"
              >
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                上一页
              </button>
              <button
                :disabled="currentPage === totalPages"
                class="ml-3 relative inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-sm font-medium rounded-xl hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
                @click="goToPage(currentPage + 1)"
              >
                下一页
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </button>
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
              <div>
                <p class="text-sm text-gray-700">
                  显示第
                  <span class="font-semibold text-blue-600">{{ (currentPage - 1) * pageSize + 1 }}</span>
                  到
                  <span class="font-semibold text-blue-600">{{ Math.min(currentPage * pageSize, totalUsers) }}</span>
                  条，共
                  <span class="font-semibold text-blue-600">{{ totalUsers }}</span>
                  条记录
                </p>
              </div>
              <div>
                <nav class="relative z-0 inline-flex rounded-xl shadow-sm -space-x-px">
                  <button
                    :disabled="currentPage === 1"
                    class="relative inline-flex items-center px-3 py-2 rounded-l-xl border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
                    @click="goToPage(currentPage - 1)"
                  >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                  </button>
                  <button
                    v-for="page in visiblePages"
                    :key="page"
                    :class="[
                      'relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-all duration-200',
                      page === currentPage
                        ? 'z-10 bg-gradient-to-r from-blue-500 to-blue-600 border-blue-500 text-white shadow-lg'
                        : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
                    ]"
                    @click="goToPage(page)"
                  >
                    {{ page }}
                  </button>
                  <button
                    :disabled="currentPage === totalPages"
                    class="relative inline-flex items-center px-3 py-2 rounded-r-xl border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
                    @click="goToPage(currentPage + 1)"
                  >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                  </button>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchQuery = ref('')
const selectedRole = ref('')
const selectedStatus = ref('')
const currentPage = ref(1)
const pageSize = ref(20)

// 模拟用户数据
const users = ref([
  {
    id: 1,
    username: 'admin',
    email: 'admin@example.com',
    avatar: '/static/avatar/admin.jpg',
    role: 'admin',
    status: 'active',
    createdAt: new Date('2023-01-01'),
    lastLoginAt: new Date('2024-01-15')
  },
  {
    id: 2,
    username: 'teacher1',
    email: 'teacher1@example.com',
    avatar: '/static/avatar/teacher1.jpg',
    role: 'teacher',
    status: 'active',
    createdAt: new Date('2023-02-01'),
    lastLoginAt: new Date('2024-01-14')
  },
  {
    id: 3,
    username: 'student1',
    email: 'student1@example.com',
    avatar: '/static/avatar/student1.jpg',
    role: 'student',
    status: 'inactive',
    createdAt: new Date('2023-03-01'),
    lastLoginAt: new Date('2024-01-10')
  },
  {
    id: 4,
    username: 'student2',
    email: 'student2@example.com',
    avatar: '/static/avatar/student2.jpg',
    role: 'student',
    status: 'banned',
    createdAt: new Date('2023-04-01'),
    lastLoginAt: new Date('2024-01-05')
  }
])

// 计算属性
const filteredUsers = computed(() => {
  let filtered = users.value

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(user => 
      user.username.toLowerCase().includes(query) ||
      user.email.toLowerCase().includes(query)
    )
  }

  // 角色过滤
  if (selectedRole.value) {
    filtered = filtered.filter(user => user.role === selectedRole.value)
  }

  // 状态过滤
  if (selectedStatus.value) {
    filtered = filtered.filter(user => user.status === selectedStatus.value)
  }

  return filtered
})

const totalUsers = computed(() => filteredUsers.value.length)
const totalPages = computed(() => Math.ceil(totalUsers.value / pageSize.value))

const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, start + 4)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  
  return pages
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleFilter = () => {
  currentPage.value = 1
}

const goToPage = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}

const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN')
}

const editUser = (user: any) => {
  console.log('编辑用户:', user)
  // 实现编辑用户逻辑
}

const banUser = (user: any) => {
  console.log('封禁用户:', user)
  user.status = 'banned'
  // 实现封禁用户逻辑
}

const unbanUser = (user: any) => {
  console.log('解封用户:', user)
  user.status = 'active'
  // 实现解封用户逻辑
}

const deleteUser = (user: any) => {
  console.log('删除用户:', user)
  const index = users.value.findIndex(u => u.id === user.id)
  if (index > -1) {
    users.value.splice(index, 1)
  }
  // 实现删除用户逻辑
}

// 生命周期
onMounted(() => {
  // 初始化数据
})
</script>